<template>
  <div class="login">
    <!-- 导航栏 -->
    <van-nav-bar
      title="黑马头条-登陆"
    />
    <!-- form 表单 -->
    <van-cell-group>
      <van-form>
        <!-- :error-message="mobile_errmsg" -->
        <van-field
        v-model.trim="mobile"
        required
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ pattern, message: '请输入正确的手机号' }]"
        />
        <van-field
        v-model.trim="code"
        required
        label="密码"
        placeholder="请输入密码"
        :rules="[{ validator, message: '请输入正确的密码' }]"
        />
      </van-form>
    </van-cell-group>
    <!-- 登录按钮 -->
    <div class="btn-wrap">
        <van-button type="info" class="btn" @click="hLogin">登录</van-button>
    </div>
    <!-- 当前是否登录？{{ $store.state.tokenInfo.token ? '已登录' : '未登录'}} -->
  </div>
</template>

<script>
// import ajax from '@/utils/request'
import { login, getInfo } from '@/api/user.js'
export default {
  name: 'Login',
  data () {
    return {
      mobile: '13912345678',
      code: '246810',
      pattern: /^\d{11}$/
      // mobile_errmsg: '', // 验证时候使用
      // code_errmasg: '' // 验证时候使用
    }
  },
  methods: {
    // 验证表单
    validator (val) {
      return /^\d{6}$/.test(val)
    },
    // check () {
    //   // 表单不能为空
    //   // this.mobile_errmsg = /^\d{11}$/.test(this.mobile) ? '' : '手机号不对'
    //   // this.code_errmasg = /^\d{6}$/.test(this.code) ? '' : '密码不对'
    //   // // if (this.mobile === '') {
    //   // //   return false
    //   // // }
    //   // // if (this.code === '') {
    //   // //   return false
    //   // // }
    //   // // 如果验证不通过，直接返回false
    //   // // return true
    //   // return (this.mobile_errmsg === '' && this.code_errmasg === '')
    // },
    // 点击登录按钮
    async hLogin () {
      // console.log(this.mobile, this.code)
      // 校验
      // if (!this.check()) {
      //   console.log('没有通过验证')
      //   return
      // }

      // 提示登陆中，显示loading效果
      this.$toast.loading({
        duration: 0, // 值为 0 时，toast 不会消失
        mask: true, // 整体添加一个遮罩层,这个是老版本，新版本是overlay
        message: '登陆中...'
      })
      // 发送请求
      try {
        /**
         * @param {*} mobile 手机号
         * @param {*} code 密码
         */
        const res = await login(this.mobile, this.code)
        console.log(res)
        // 登录成功，保存token
        this.$store.commit('mSetToken', res.data.data)

        // 2. 再发请求获取个人信息
        const result = await getInfo()
        console.log(result)
        const user = res.data.data
        // 保存到vuex
        this.$store.commit('mSetUserInfo', {
          id: user.id,
          name: user.name,
          photo: user.photo
        })

        // const profile = await getProfile()
        // console.log(profile)
        this.$toast.success('登录成功')
        // 登录成功，跳转页面
        const backto = this.$route.query.backto || '/'
        this.$router.push(backto)
        // this.$router.push('/')
      } catch (err) {
        console.log(err)
        this.$toast.fail('登录失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
  .login {
    .btn-wrap {
      padding: 20px;
      .btn {
        width: 100%;
        background-color: #6db4fd;
        color:#fff;
      }
    }
  }
</style>
